<template>
  <div id="feelBack">
    <v-header title="反馈明细" :saveShow="false" :showDownloadBtn="false"></v-header>
    <div class="feelBackCon">
      <div class="feelBack_main">
        <div class="feelBack_header">
          <div class="condition">
            <div class="query_con">
              <el-input v-model="keyword"
                        size="mini"
                        prefix-icon="el-icon-search"
                        placeholder="请输入标题或内容"
                        clearable></el-input>
              <el-button type="primary" size="mini" @click="querySelect">查询</el-button>
            </div>
          </div>
          <!--<div class="condition">
            <el-row>
              <el-col :span="1">
                <span>版本:</span>
              </el-col>
              <el-col :span="22">
                <el-checkbox-group v-model="app_vers" @change="checkTypes">
                  <el-checkbox v-for="version in versionList" :label="version" :key="version">{{version}}</el-checkbox>
                </el-checkbox-group>
              </el-col>
            </el-row>
          </div>-->
        </div>
        <div class="collect_table">
          <el-table :data="tableData">
            <el-table-column header-align="center" align="center" prop="pro_title" label="标题"></el-table-column>
            <el-table-column header-align="center" align="center" prop="pro_desc" label="内容"></el-table-column>
            <el-table-column header-align="center" align="center" prop="pro_tel" label="电话"></el-table-column>
            <!--<el-table-column header-align="center" align="center" prop="exp_hap_time" label="日期"></el-table-column>-->
            <el-table-column header-align="center" align="center" label="操作">
              <template slot-scope="scope">
                <el-button size="mini" type="text" @click="collectDetail(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="feelBack_pages">
          <el-pagination
              small
              @current-change="handleCurrentChange"
              :page-size="pageSize"
              :pager-count="5"
              layout="total, prev, pager, next"
              :total="Number(total)">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { VHeader } from '../../components'
  import { nextPage } from '../../assets/js/index'
  import api from '../../api/url'
  import { mapMutations } from 'vuex'
  import ajax from '../../api/ajax/ajax'
  import { mixinParams } from '../../assets/js/mixin1'
  export default {
    components: {
      VHeader
    },
    mixins: [mixinParams],
    watch: {
      appFlag: {
        handler (val) {
          if (val) {
            this.addFlag = true
            nextPage('/home/bugIndex')
            this.pd_updatePath('/home/bugIndex')
          }
        }
      }
    },
    data () {
      return {
        keyword: '',
        app_vers: [],
        versionList: ['1.0', '2.0', '3.0'],
        tableData: [],
        pageSize: 10, // 每页条目数
        total: 0, // 总条目数
        pageNo: 1 // 当前页
      }
    },
    methods: {
      ...mapMutations([
        'updateBugListOpt'
      ]),
      // 多选框变化是触发
      checkTypes (val) {},
      querySelect () {
        this.querySelectProsList()
      },
      collectDetail (val) {
        let buglistopt = {
          id: val.id,
          app_id: val.app_id,
          app_ver: val.app_ver,
          dev_id: val.dev_id,
          pro_tel: val.pro_tel,
          pro_title: val.pro_title,
          pro_time: val.pro_time,
          pro_desc: val.pro_desc
        }
        this.updateBugListOpt(buglistopt)
        nextPage('/home/feedbackInfo')
      },
      // 改变当前页时触发
      handleCurrentChange (val) {
        this.pageNo = val
        this.querySelectProsList()
      },
      querySelectProsList () {
        let params = {
          pageNo: this.pageNo, // 页码
          pageSize: this.pageSize, // 页面大小
          keyword: this.keyword // 关键字
        }
        ajax.post(api.SELECT_PROS_LIST, params)
          .then(res => {
            if (!res.data.list) return
            this.tableData = res.data.list
            this.total = res.data.total
          })
      }
    },
    mounted () {
      this.querySelectProsList()
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
  #feelBack
    height 100%
    .feelBackCon
      height calc(100% - 56px)
      overflow: auto
      margin 10px 0 0 10px
      padding-right 10px
      .feelBack_main
        text-align left
        background-color #fff
        width 100%
        .feelBack_header
          border-bottom 1px solid rgb(240, 240, 240)
          padding-bottom 20px
          .condition
            padding 10px 25px
            overflow hidden
            .query_con
              float right
              width 300px
              .el-input--mini
                width 200px
              .el-button--danger
                background-color #016DFB
                border-color #016DFB
        .feelBack_pages
          .el-pagination
            padding 10px 15px 10px 0
            line-height 30px
            text-align right
</style>
